<template>
  <div>
    <div v-for="(item, index) in rightlist" :key="index" class="list">
      <span class="left">
        <img :src="item.cover" alt="" />
      </span>
      <span class="right">
        <span class="name" @click="todetail(index)">
          {{ item.name }}
        </span>
        <span class="stock">累计{{ item.stock }}份</span>
        <span class="price"
          >￥<span class="num">{{ item.price }}</span
          ><span class="car">加</span></span
        >
      </span>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  props: {
    itemindex: "",
    rightlist: [],
  },
  data() {
    return {};
  },
  methods: {
    ...mapMutations("detail", ["changeList"]),
    todetail(index) {
      this.changeList(this.rightlist[index]);
      this.$router.push(`/detail`);
    },
  },
};
</script>

<style scoped>
.list {
  overflow: auto;
}
.left img {
  width: 100px;
  height: 100px;
  float: left;
}
.right {
  display: flex;
  flex-direction: column;
  padding-left: 5px;
}
.name {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}
.stock {
  font-size: 10px;
  color: #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
}
.price {
  color: red;
  font-size: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.num {
  font-size: 17px;
  font-weight: bold;
}
.car {
  float: right;
  font-size: 17px;
  margin-right: 15px;
}
</style>